<template>
    <div>
        <!-- 头部 -->
         <div class="frist_show">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/assess' }">评估测评</el-breadcrumb-item>
              <el-breadcrumb-item>{{this.$route.params.rname}}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
        </div>
        <!-- 尾部 -->
        <div style="position: absolute;top: 130px;left:180px;">
            <div v-if="rid === '1' ? true:false">
                <div style="width:1200px;height:150px;background-color: darkgrey;border-radius: 8px;margin-bottom:50px;cursor: pointer;" v-for="item in rubTypes" :key="item.VALUE" @click="tizhiType(item.VALUE)">
                    <svg aria-hidden="true" style="margin-bottom:-65px">
                        <use></use>
                    </svg>
                    <span style="margin-left:260px;color:white;font-size:30px;">{{item.NAME}}</span>
                </div>
            </div>
            <div v-if="rid === '2' ? true:false">
                <div style="width:1200px;height:150px;background-color: darkgrey;border-radius: 8px;margin-bottom:50px;cursor: pointer;" v-for="item in xlTypes" :key="item.VALUE" @click="xinliType(item.VALUE)">
                    <svg aria-hidden="true" style="margin-bottom:-65px">
                        <use></use>
                    </svg>
                    <span style="margin-left:260px;color:white;font-size:30px;">{{item.NAME}}</span>
                </div>
            </div>
            <div v-if="rid === '3' ? true:false">
                <div style="width:1200px;height:150px;background-color: darkgrey;border-radius: 8px;margin-bottom:50px;cursor: pointer;" v-for="item in fxTypes" :key="item.VALUE" @click="fxType(item.VALUE)">
                    <svg aria-hidden="true" style="margin-bottom:-65px">
                        <use></use>
                    </svg>
                    <span style="margin-left:260px;color:white;font-size:30px;">{{item.NAME}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Evaluate',
  data () {
    return {
      rid: this.$route.params.rid,
      rname: this.$route.params.rname,
      rubTypes: [
        {NAME: '平和质', VALUE: 1},
        {NAME: '气虚质', VALUE: 2},
        {NAME: '阳虚质', VALUE: 3},
        {NAME: '阴虚质', VALUE: 4},
        {NAME: '痰湿质', VALUE: 5},
        {NAME: '湿热质', VALUE: 6},
        {NAME: '血瘀质', VALUE: 7},
        {NAME: '气郁质', VALUE: 8},
        {NAME: '特禀质', VALUE: 9}],
      xlTypes: [
        {NAME: '躯体化', VALUE: 10},
        {NAME: '强迫症化', VALUE: 11},
        {NAME: '人际关系敏感', VALUE: 12},
        {NAME: '犹豫', VALUE: 13},
        {NAME: '焦虑', VALUE: 14},
        {NAME: '敌对', VALUE: 15},
        {NAME: '恐怖', VALUE: 16},
        {NAME: '偏执', VALUE: 17},
        {NAME: '精神病性', VALUE: 18}
      ],
      fxTypes: [
        {NAME: '膳食情况', VALUE: 19},
        {NAME: '体力活动', VALUE: 20},
        {NAME: '吸烟情况', VALUE: 21}
      ]
    }
  },
  methods: {
    // 体质类型的点击事件
    tizhiType (rval) {
      this.$router.push('/quetion/' + this.rid + '/' + rval + '/' + this.rname)
    },
    // 心理类型的点击事件
    xinliType (rval) {
      this.$router.push('/quetion/' + this.rid + '/' + rval + '/' + this.rname)
    },
    // 风险类型的点击事件
    fxType (rval) {
      this.$router.push('/quetion/' + this.rid + '/' + rval + '/' + this.rname)
    }
  },
  created () {
  }
}
</script>

<style>
.frist_show{position: absolute;top: 0px;left:20px;width: 1500px;height: 50px;}
.frist_show .el-breadcrumb{margin-top: 15px;}
</style>
